<template>
    <div>
        <!-- 

            vue项目的本质理念：数据驱动视图(在做任何需求时，首先通过数据来修改)
            在vue的<script>中，如果想要访问data中的数据或者调用methods中的方法，需要在前面加上this
            在<template>模板中，则不需要加this
            v-on 事件绑定:
            语法:   v-on:事件名="简单的函数执行体" => 只有一行代码
                    v-on:事件名="methods中定义的方法"
                    v-on:事件名="methods中定义的方法(实参)"
            简写：  v-on: => @  @事件名="methods中定义的方法"
        -->
        <p>{{ count }}</p>
        <button v-on:click="count++">点击+1</button>
        <button v-on:click="addCount2">点击+2</button>
        <button v-on:click="addCountN(5)">点击+5</button>
        <button @click="addCountN(7)">点击+7</button>
        <br>
        <!-- 
            v-on获取事件对象，通过事件对象来做一些限制(阻止默认行为，阻止事件冒泡)
            dom.onclick((evnet) => { 就可以通过默认的event形参来获取到事件对象 })

            v-on:click="goUrl" => goUrl (event) {}

            语法：
                总结经验： 如果方法不需要传参，那么不要去写小括号
                1. 无参数状态 => @click="goUrl" 在v-on指令后绑定方法时不加小括号的形式
                                在定义方法时默认的事件对象在第一个形参上
                2. 有参数状态(绑定方法时后面有括号的形式) => @click="goUrl2()"
                                在定义方法时主动传递事件对象 @click="goUrl2($event)"
                                使用时，对应实参位置设置形参即可使用
                    原因: 只要在使用方法时打上小括号，就会覆盖原本vue默认设置在第一个形参上的事件对象参数
         -->
         <a @click="goUrl" href="http://www.baidu.com">http://www.baidu.com</a><br>
         <a @click="goUrl2($event)" href="http://www.baidu.com">有参数</a>

         <!-- 
            事件修饰符
            语法：@事件名.修饰符="方法"
                 @click.prevent="preventFn" => 阻止默认事件 => 最为常用的修饰符
                 @click.stop="stopFn" => 阻止事件冒泡 => 一般
                 @click.once="onceFn" => 绑定的事件只有一次有效 => 罕见
          -->
        <div @click="fatherFn">
            <p @click.stop="stopFn">stop - 阻止事件冒泡</p>
            <a @click.prevent.stop="preventFn" href="http://www.baidu.com">http://www.baidu.com</a>
            <p @click.once.stop="onceFn">只执行一次</p>
        </div>

        <!-- 
            键盘事件的按键修饰符
            @keyup.enter => 监听回车按键，只有按下回车时才会触发绑定的方法
            @keyup.esc => 监听返回按键，只有按下返回时参会触发绑定的方法
        -->
        <input type="text" @keyup.enter="keyupFn1">
        <input type="text" @keyup.esc="keyupFn2">
    </div>
</template>

<script>
export default {
    name: 'DemoIndex3',
    data() {
        return {
            count: 0
        }
    },
    // vue组件的方法定义在methods对象中
    methods: {
        // 点击+2并打印
        addCount2(){
            this.count += 2
            console.log(this.count)
        },
        // 点击加按钮传递过来的数字
        addCountN(num){
            this.count += num
        },
        goUrl(event) {
            console.log(event)
            // 阻止默认事件
            event.preventDefault()
        },
        goUrl2(event) {
            console.log(event)
            // 阻止默认事件
            event.preventDefault()
        },
        fatherFn(){
            console.log('点击了父盒子')
        },
        // 阻止事件冒泡
        stopFn(){
            console.log('阻止事件冒泡')
        },
        // 阻止默认行为
        preventFn(){
            console.log('阻止默认行为')
        },
        // 只执行一次
        onceFn(){
            console.log('只执行一次')
        },
        // 按下了回车
        keyupFn1(e){
            console.log('按下了回车')
            console.log(e.target.value)
            e.target.value = ''
        },
        // 按下了esc
        keyupFn2(e){
            console.log('按下了esc')
            e.target.value = ''
        }
    },
}
</script>

<style>

</style>

